<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>以图搜图</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body style="margin-left: 50px">

<div class="layui-upload-list">
    <img class="layui-upload-img" id="img" style="margin-left: 20px" height="200px" width="400px">
</div>
<button type="button" style="margin-left: 20px" class="layui-btn" id="upload">
    <i class="layui-icon">&#xe67c;</i>上传图片并匹配
</button>
<button type="button" style="margin-left: 20px" class="layui-btn" id="addPic">
    <i class="layui-icon layui-icon-add-circle"></i>添加图片
</button>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>设置匹配度</legend>
</fieldset>

<div id="slide" class="demo-slider" style="margin-bottom: 20px"></div>
<div id="tips" style="position:relative; left: 10px; top: -20px;margin-bottom: 20px">当前匹配度：<span id="score_num">70</span>%</div>

<div>匹配结果</div>

<div id="imglist">
</div>


<script src="layui/layui.js"></script>
<script>
    layui.use(['upload', 'slider'], function () {
        var $ = layui.$
            , slider = layui.slider;
        $("#addPic").on('click',function(){
            window.location.href="add.html"
        })
        //设置提示文本
        slider.render({
            elem: '#slide',
            min: 0,
            max: 100,
            value: 70
            , change: function (value) {
                $('#score_num').html(value);
            }
        });
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            , url: 'http://127.0.0.1:8080/search' //上传接口
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $("#img").attr("src", result);
                });
                layer.load();
            }
            , done: function (res) {
                console.log(res);
                //上传完毕回调
                var array = res.result;
                var imgList = new Array();
                for (var i = 0; i < array.length; i++) {
                    var score = array[i].score;
                    var socre_value = $("#score_num").text();
                    console.log(socre_value);
                    if (score >= socre_value/100) {
                        // $("#img1").attr("src", "image/"+array[i].brief);
                        imgList.push("image/" + array[i].brief);
                    }
                }
                var list = $("#imglist");
                list.children().remove();
                for (var i = 0; i < imgList.length; i++) {
                    // $("#img1").attr("src", imgList[i]);
                    var img = imgList[i];
                    var body = "<img class=\"layui-upload-img\" id=\"img1\" src=\"" + img + "\" alt=\"\" width=\"400px\" height=\"200px\" style='margin-left: 20px'>";
                    list.append(body);
                }
                layer.closeAll('loading');
            }
            , error: function () {
                //请求异常回调
                layer.closeAll('loading');
            }
        });
    });
</script>
</body>
</html>